<template>
  <div class="container">
    <el-card style="margin: 10px">
      <!-- form表单 -->
      <el-form label-position="left" inline size="small">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="学科名称">
              <el-input v-model="pageForm.subjectName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="hCleanName">清除</el-button>
              <el-button type="primary" @click="hInquiry">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="success" @click="hAdd" icon="el-icon-edit">新增学科</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- alert提示 -->
      <el-alert title="" type="info" show-icon> 数据一共{{total}}条 </el-alert>
      <!-- table表格 -->
      <el-table style="margin-top: 15px" :data="subjectList">
        <el-table-column
          label="序号"
          type="index"
          :index="pageAdd"
          sortable
        ></el-table-column>
        <el-table-column label="学科名称" prop="subjectName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="180">
      <template v-slot="scope">
          <span>{{ dateFormatting(scope.row.addDate) }}</span>
      </template>
      </el-table-column>
        <el-table-column
          label="前台是否显示"
        >
        <template v-slot="scope">
          {{scope.row.isFrontDisplay ? '是' : '否'}}
        </template>
        </el-table-column>
        <el-table-column
          label="二级目录"
          prop="twoLevelDirectory"
        ></el-table-column>
        <el-table-column label="标签" prop="tags"></el-table-column>
        <el-table-column label="题目数量" prop="totals"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template v-slot="scope">
            <el-button type="text" @click="$router.push(`/subjects/directorys?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科分类</el-button>
            <el-button type="text" @click="$router.push(`/subjects/tags?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科标签</el-button>
            <el-button type="text" @click="hEdit(scope.row)">修改</el-button>
            <el-button type="text" @click="hDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- pag分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev,pager,next,sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageForm.pagesize"
          :total="total"
          :page="pageForm.page"
          :current-page.sync="pageForm.page"
        ></el-pagination>
      </el-row>
    </el-card>
    <!-- 弹窗: 新增||编辑 -->
    <el-dialog
      width="400px"
      :visible.sync="showDialog"
      :title="isEdit ? '修改学科' : '新增学科'"
      v-if="showDialog"
    >
    <subjects-add
    :isEdit="isEdit"
    :backFormData = " formData"
    @success = "hsuccess"
    @close="hClean"
    ref="formAddRef"
    />
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import { list, remove } from '@/api/hmmm/subjects.js'
import subjectsAdd from '@/module-hmmm/components/subjects-add.vue'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    subjectsAdd
  },
  data () {
    return {
      subjectList: [],
      pageForm: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      total: 5,
      showDialog: false,
      isEdit: '',
      formData: {}
    }
  },
  created () {
    this.loadSubject()
  },

  methods: {
    // 格式化处理录入时间
    dateFormatting (date) {
      return parseTime(date)
    },
    // 清除
    hCleanName () {
      this.pageForm = {
        page: 1,
        pagesize: 10,
        subjectName: ''
      }
    },
    // 调用子组件方法清空
    hClean () {
      // console.log(this.$refs.formAddRef.hClean)
      this.showDialog = false
      this.$refs.formAddRef.hClean()
    },
    // 更新成功
    hsuccess () {
      this.pageForm.page = 1
      // 刷新页面
      this.loadSubject()
      // 关闭弹窗
      this.showDialog = false
    },
    // 解决pagebug
    // totalAdd () {
    //   this.total++
    //   this.pageForm.page = Math.ceil(this.total / this.pageForm.pagesize)
    // },
    // 删除弹窗提醒
    async hDel (row) {
      this.$confirm('此操作将永久删除该学科,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 做删除
    async doDel (row) {
      try {
        const res = await remove(row)
        console.log(res)
      } catch (error) {
        this.$message.error(error.message)
      }

      // 解决删除后当前页面数据为空bug
      if (this.subjectList.length === 1) {
        let page = this.pageForm.page
        page--

        page = Math.max(1, page)
        this.pageForm.page = page
      }
      this.loadSubject()
    },
    // 取消-关闭
    hCancel () {
      // 关闭弹窗
      this.showDialog = false
    },
    // 修改学科弹窗
    hEdit (val) {
      this.showDialog = true
      this.isEdit = true
      val.isFrontDisplay = String(val.isFrontDisplay)
      // 数据回填的数据
      this.formData = {
        ...val
      }
    },
    // 新增学科弹窗
    hAdd () {
      this.showDialog = true
      this.isEdit = false
    },

    // 连续序号
    pageAdd (index) {
      return (this.pageForm.page - 1) * this.pageForm.pagesize + index + 1
    },
    // 点击查询
    hInquiry () {
      this.pageForm.page = 1
      this.loadSubject(this.pageForm)
    },
    // 请求表格数据(学科数据)
    async loadSubject () {
      const res = await list(this.pageForm)
      console.log('1.学科列表', res)
      this.subjectList = res.data.items

      // 更新total
      this.total = res.data.counts
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // 回到第一页
      this.pageForm.page = 1
      this.pageForm.pagesize = val

      // 刷新
      this.loadSubject(this.pageForm)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageForm.page = val

      // 刷新
      this.loadSubject(this.pageForm)
    }
  }
}
</script>

<style scoped lang='less'></style>
